<template>
  <div class="content-card">

    
    <h2 class="module-title">个人中心</h2>
    <div class="profile-container">
      <!-- 个人信息内容 -->
      <div class="profile-header">
        <div class="avatar-section">
          <el-avatar class="avatar" size="large" @click="showAvatarUpload = true">
            <img :src="userInfo.avatar || '/images/default-avatar.png'" alt="用户头像">
          </el-avatar>
          <el-button size="small" @click="showAvatarUpload = true" class="upload-btn">更换头像</el-button>
        </div>
        <div class="user-info">
          <h3>{{ userInfo.username || '未设置' }}</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">{{ userInfo.schoolNum || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">学校：</span>
              <span class="value">{{ userInfo.schoolName || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">专业：</span>
              <span class="value">{{ userInfo.major || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">年级：</span>
              <span class="value">{{ userInfo.grade || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">班级：</span>
              <span class="value">{{ userInfo.classNum || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="label">邮箱：</span>
              <span class="value">{{ userInfo.email || '未设置' }}</span>
            </div>
          </div>
        </div>
        <el-button class="edit-btn" @click="showEditDialog = true">
          <el-icon><Edit /></el-icon>
          编辑资料
        </el-button>
      </div>

      <!-- 恢复标签页内容 -->
      <el-tabs v-model="activeTab" class="profile-tabs">
        <el-tab-pane label="我的帖子">
          <div v-if="postsLoading && myPosts.length === 0" class="loading-state">
            <el-loading-directive v-loading="true" text="加载帖子中..." />
          </div>
          <div v-else-if="myPosts.length === 0" class="empty-state">
            <el-icon class="empty-icon"><Edit /></el-icon>
            <p>还没有发布过帖子</p>
            <p class="empty-tip">去交流广场分享你的想法吧！</p>
          </div>
          <div v-else class="post-list">
            <div v-for="post in myPosts" :key="post.id" class="post-item">
              <!-- 帖子头部 -->
              <div class="post-header">
                <div class="post-meta">
                  <span class="post-time">{{ formatTime(post.createTime) }}</span>
                  <span class="post-id">#{{ post.id }}</span>
                </div>
              </div>
              
              <!-- 帖子内容 -->
              <div class="post-content">
                <h4 v-if="post.title" class="post-title">{{ post.title }}</h4>
                <p class="post-text">{{ post.content }}</p>
                
                <!-- 帖子图片 -->
                <div v-if="post.images && post.images.length > 0" class="post-images">
                  <div class="image-grid" :class="`grid-${Math.min(post.images.length, 3)}`">
                    <img 
                      v-for="(image, index) in post.images.slice(0, 9)" 
                      :key="index"
                      :src="image.imageUrl || image"
                      :alt="`图片${index + 1}`"
                      class="post-image"
                      @click="previewImage(image.imageUrl || image)"
                    />
                  </div>
                </div>
              </div>
              
              <!-- 帖子操作栏 -->
              <div class="post-actions">
                <div class="action-group">
                  <button 
                    class="action-btn like-btn" 
                    :class="{ active: post.isLiked }"
                    @click="toggleLike(post)"
                  >
                    <el-icon><Star /></el-icon>
                    <span>{{ post.likeCount || 0 }}</span>
                  </button>
                  
                  <button class="action-btn comment-btn">
                    <el-icon><ChatDotRound /></el-icon>
                    <span>{{ post.commentCount || 0 }}</span>
                  </button>
                  
                  <button class="action-btn view-btn">
                    <el-icon><View /></el-icon>
                    <span>{{ post.viewCount || 0 }}</span>
                  </button>
                </div>
              </div>
            </div>
            
            <!-- 加载更多按钮 -->
            <div v-if="hasMorePosts" class="load-more">
              <el-button 
                @click="loadMorePosts" 
                :loading="postsLoading"
                class="load-more-btn"
              >
                {{ postsLoading ? '加载中...' : '加载更多' }}
              </el-button>
            </div>
            
            <div v-else-if="myPosts.length > 0" class="no-more">
              <p>已显示全部帖子</p>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的任务">
          <el-tabs v-model="taskActiveTab" class="task-tabs">
            <el-tab-pane label="我发布的" name="published">
              <div v-if="tasksLoading && myPublishedTasks.length === 0" class="loading-state">
                <el-loading-directive v-loading="true" text="加载任务中..." />
              </div>
              <div v-else-if="myPublishedTasks.length === 0" class="empty-state">
                <el-icon class="empty-icon"><Document /></el-icon>
                <p>还没有发布过任务</p>
                <p class="empty-tip">去任务大厅发布你的第一个任务吧！</p>
              </div>
              <div v-else class="task-list">

                
                <div v-for="task in myPublishedTasks" :key="task.id" class="task-item">
                  <div class="task-header">
                    <h4 class="task-title">{{ task.title }}</h4>
                    <span class="task-status" :class="getTaskStatusClass(task.status)">{{ getTaskStatusText(task.status) }}</span>
                  </div>
                  <div class="task-content">
                    <p class="task-description">{{ task.description }}</p>
                    <div class="task-meta">
                      <span class="task-price">¥{{ task.price }}</span>
                      <span class="task-category">{{ task.category }}</span>
                      <span class="task-time">{{ formatTime(task.createdTime) }}</span>
                    </div>
                    <!-- 接单者信息 -->
                    <div v-if="task.status === 'ACCEPTED' && task.accepterName" class="accepter-info">
                      <div class="user-avatar" @click="goToUserProfile(task.accepterId)">
                        <img class="avatar-img" :src="task.accepterAvatar || '/images/avatar-default.png'" :alt="task.accepterName" />
                      </div>
                      <div class="user-info">
                        <div class="username" @click="goToUserProfile(task.accepterId)">{{ task.accepterName }}</div>
                        <div class="post-time">接单于 {{ formatTime(task.acceptedTime) }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task-actions">
                    <el-button 
                      type="danger" 
                      size="small" 
                      @click="cancelPublishedTask(task.id)" 
                      v-if="canCancelPublishedTask(task)"
                    >
                      取消发布
                    </el-button>

                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="我接受的" name="accepted">
              <div v-if="tasksLoading && myAcceptedTasks.length === 0" class="loading-state">
                <el-loading-directive v-loading="true" text="加载任务中..." />
              </div>
              <div v-else-if="myAcceptedTasks.length === 0" class="empty-state">
                <el-icon class="empty-icon"><Document /></el-icon>
                <p>还没有接受过任务</p>
                <p class="empty-tip">去任务大厅接受感兴趣的任务吧！</p>
              </div>
              <div v-else class="task-list">

                
                <div v-for="task in myAcceptedTasks" :key="task.id" class="task-item">
                  <div class="task-header">
                    <h4 class="task-title">{{ task.title }}</h4>
                    <span class="task-status" :class="getTaskStatusClass(task.status)">{{ getTaskStatusText(task.status) }}</span>
                  </div>
                  <div class="task-content">
                    <p class="task-description">{{ task.description }}</p>
                    <div class="task-meta">
                      <span class="task-price">¥{{ task.price }}</span>
                      <span class="task-category">{{ task.category }}</span>
                      <span class="task-time">接受时间：{{ task.acceptedTime ? formatTime(task.acceptedTime) : '未记录' }}</span>
                    </div>
                    <!-- 发起人信息 -->
                    <div v-if="task.publisherName" class="publisher-info">
                      <div class="user-avatar" @click="goToUserProfile(task.publisherId)">
                        <img class="avatar-img" :src="task.publisherAvatar || '/images/avatar-default.png'" :alt="task.publisherName" />
                      </div>
                      <div class="user-info">
                        <div class="username" @click="goToUserProfile(task.publisherId)">{{ task.publisherName }}</div>
                        <div class="post-time">发布于 {{ formatTime(task.createdTime) }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="task-actions">
                    <el-button 
                      v-if="canCompleteTask(task)" 
                      type="success" 
                      size="small" 
                      @click="completeTask(task.id)"
                    >
                      完成任务
                    </el-button>
                    <el-button 
                      v-if="canCancelAcceptedTask(task)" 
                      type="warning" 
                      size="small" 
                      @click="cancelAcceptedTask(task.id)"
                    >
                      取消接单
                    </el-button>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-tab-pane>
        <el-tab-pane label="设置">
          <el-form class="settings-form">
            <el-form-item label="通知设置">
              <el-switch v-model="notificationEnabled"></el-switch>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 头像上传对话框 -->
    <el-dialog v-model="showAvatarUpload" title="更换头像" width="400px">
      <div class="avatar-upload-dialog">
        <div class="current-avatar">
          <el-avatar size="large">
            <img :src="userInfo.avatar || '/images/avatar-default.png'" alt="当前头像">
          </el-avatar>
          <p>当前头像</p>
        </div>
        <div class="upload-section">
          <input ref="fileInput" type="file" accept="image/*" @change="handleAvatarUpload" class="file-input">
          <el-button type="primary" @click="triggerFileInput">选择新头像</el-button>
          <p class="upload-tip">支持 JPG、PNG 格式，文件大小不超过 5MB</p>
        </div>
      </div>
    </el-dialog>
    
    <!-- 编辑资料对话框 -->
    <el-dialog v-model="showEditDialog" title="编辑资料" width="600px">
      <el-form :model="editForm" label-width="80px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户名">
              <el-input v-model="editForm.username" placeholder="请输入用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学号">
              <el-input v-model="editForm.schoolNum" placeholder="请输入学号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="学校">
              <el-input v-model="editForm.schoolName" placeholder="请输入学校名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业">
              <el-input v-model="editForm.major" placeholder="请输入专业"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年级">
              <el-input v-model="editForm.grade" placeholder="请输入年级"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班级">
              <el-input v-model="editForm.classNum" placeholder="请输入班级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="邮箱">
          <el-input v-model="editForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="editForm.address" placeholder="请输入地址"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="saveProfile" :loading="saving">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Edit, ChatDotRound, Star, View, Document } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import axios from '@/utils/axiosConfig'
import { getUserPosts, likePost, unlikePost } from '@/api/post'

// 获取路由实例
const router = useRouter()

const activeTab = ref('first')
const taskActiveTab = ref('published')
const myPosts = ref([])
const myPublishedTasks = ref([])
const myAcceptedTasks = ref([])
const notificationEnabled = ref(true)
const showAvatarUpload = ref(false)
const showEditDialog = ref(false)
const saving = ref(false)
const fileInput = ref(null)
const tasksLoading = ref(false)

// 帖子相关数据
const postsLoading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const hasMorePosts = ref(true)
const totalPosts = ref(0)

const userInfo = ref({
  username: '',
  schoolNum: '',
  email: '',
  schoolName: '',
  major: '',
  grade: '',
  classNum: '',
  phone: '',
  address: '',
  avatar: ''
})

const editForm = ref({
  username: '',
  schoolNum: '',
  email: '',
  schoolName: '',
  major: '',
  grade: '',
  classNum: '',
  phone: '',
  address: ''
})

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const token = localStorage.getItem('token')
    if (!token) {
      ElMessage.error('请先登录')
      return
    }
    
    const response = await axios.get('/auth/profile')
    
    if (response.data.success) {
      userInfo.value = response.data.data
      // 复制到编辑表单
      Object.assign(editForm.value, response.data.data)
      // 获取用户帖子和任务
      await fetchMyPosts()
      await fetchMyTasks()
    } else {
      ElMessage.error(response.data.message || '获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    ElMessage.error('获取用户信息失败')
  }
}

// 获取我的帖子
const fetchMyPosts = async (page = 1, append = false) => {
  if (postsLoading.value || !userInfo.value.id) return
  
  try {
    postsLoading.value = true
    const response = await getUserPosts(userInfo.value.id, page, pageSize.value)
    
    // getUserPosts使用request工具，响应拦截器已经返回response.data
    // 所以response就是后端返回的数据
    if (response.success) {
      const posts = response.data || []
      
      // 处理帖子图片数据结构
      posts.forEach(post => {
        if (post.imageUrls && Array.isArray(post.imageUrls)) {
          // 如果imageUrls是字符串数组，转换为对象数组
          post.images = post.imageUrls.map(url => ({ imageUrl: url }))
        } else if (post.images && Array.isArray(post.images)) {
          // 如果已经是对象数组，保持不变
          // post.images = post.images
        } else {
          post.images = []
        }
      })
      
      if (append) {
        myPosts.value.push(...posts)
      } else {
        myPosts.value = posts
      }
      
      // 检查是否还有更多帖子
      hasMorePosts.value = posts.length === pageSize.value
      currentPage.value = page
      totalPosts.value = myPosts.value.length
    } else {
      ElMessage.error(response.message || '获取帖子失败')
    }
  } catch (error) {
    console.error('获取帖子失败:', error)
    ElMessage.error('获取帖子失败')
  } finally {
    postsLoading.value = false
  }
}

// 加载更多帖子
const loadMorePosts = async () => {
  if (hasMorePosts.value && !postsLoading.value) {
    await fetchMyPosts(currentPage.value + 1, true)
  }
}

// 点赞/取消点赞帖子
const toggleLike = async (post) => {
  try {
    if (post.isLiked) {
      await unlikePost(post.id)
      post.isLiked = false
      post.likeCount = Math.max(0, (post.likeCount || 0) - 1)
    } else {
      await likePost(post.id)
      post.isLiked = true
      post.likeCount = (post.likeCount || 0) + 1
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    ElMessage.error('操作失败，请重试')
  }
}

// 格式化时间
const formatTime = (timeString) => {
  if (!timeString) return ''
  
  const now = new Date()
  const postTime = new Date(timeString)
  const diffMs = now - postTime
  const diffMinutes = Math.floor(diffMs / (1000 * 60))
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
  
  if (diffMinutes < 1) {
    return '刚刚'
  } else if (diffMinutes < 60) {
    return `${diffMinutes}分钟前`
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else if (diffDays < 30) {
    return `${diffDays}天前`
  } else {
    return postTime.toLocaleDateString()
  }
}

// 图片预览功能
const previewImage = (imageUrl) => {
  // 创建图片预览
  const images = [imageUrl]
  // 这里可以使用 Element Plus 的图片预览组件或者自定义预览逻辑
  window.open(imageUrl, '_blank')
}

// 触发文件选择
const triggerFileInput = () => {
  fileInput.value.click()
}

// 处理头像上传
const handleAvatarUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return
  
  // 验证文件类型和大小
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }
  
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB')
    return
  }
  
  try {
    const formData = new FormData()
    formData.append('avatar', file)
    
    const response = await axios.post('/auth/upload-avatar', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
    
    if (response.data.success) {
      userInfo.value.avatar = response.data.avatarUrl || response.data.data?.avatarUrl
      ElMessage.success('头像更新成功')
      showAvatarUpload.value = false
    } else {
      ElMessage.error(response.data.message || '头像上传失败')
    }
  } catch (error) {
    console.error('头像上传失败:', error)
    ElMessage.error('头像上传失败')
  }
  
  // 清空文件输入
  event.target.value = ''
}

// 保存资料
const saveProfile = async () => {
  try {
    saving.value = true
    
    const response = await axios.put('/auth/profile', editForm.value)
    
    if (response.data.success) {
      Object.assign(userInfo.value, editForm.value)
      ElMessage.success('资料更新成功')
      showEditDialog.value = false
    } else {
      ElMessage.error(response.data.message || '更新失败')
    }
  } catch (error) {
    console.error('更新资料失败:', error)
    ElMessage.error('更新资料失败')
  } finally {
    saving.value = false
  }
}

// 获取我的任务（发布的和接受的）
const fetchMyTasks = async () => {
  if (!userInfo.value.id) return
  
  try {
    tasksLoading.value = true
    
    // 获取我发布的任务
    const publishedResponse = await axios.get(`/task-orders/publisher/${userInfo.value.id}`)
    if (publishedResponse.data.success) {
      myPublishedTasks.value = publishedResponse.data.data || []
    }
    
    // 获取我接受的任务
    const acceptedResponse = await axios.get(`/task-orders/accepter/${userInfo.value.id}`)
    if (acceptedResponse.data.success) {
      myAcceptedTasks.value = acceptedResponse.data.data || []
    }
  } catch (error) {
    console.error('获取任务失败:', error)
    ElMessage.error('获取任务失败')
  } finally {
    tasksLoading.value = false
  }
}

// 获取任务状态文本
const getTaskStatusText = (status) => {
  const statusMap = {
    'OPEN': '待接单',
    'ACCEPTED': '已接单',
    'IN_PROGRESS': '进行中',
    'COMPLETED': '已完成',
    'CANCELLED': '已取消',
    'TIMEOUT': '已超时'
  }
  return statusMap[status] || '未知状态'
}

// 获取任务状态样式类
const getTaskStatusClass = (status) => {
  const classMap = {
    'OPEN': 'status-pending',
    'ACCEPTED': 'status-accepted',
    'IN_PROGRESS': 'status-progress',
    'COMPLETED': 'status-completed',
    'CANCELLED': 'status-cancelled',
    'TIMEOUT': 'status-timeout'
  }
  return classMap[status] || 'status-default'
}

// 判断是否可以取消发布的任务
const canCancelPublishedTask = (task) => {
  return task.status === 'OPEN' || task.status === 'ACCEPTED'
}

// 判断是否可以完成任务
const canCompleteTask = (task) => {
  return task.status === 'ACCEPTED'
}

// 判断是否可以取消接受的任务
const canCancelAcceptedTask = (task) => {
  return task.status === 'ACCEPTED'
}



// 取消发布的任务
const cancelPublishedTask = async (taskId) => {
  try {
    const response = await axios.put(`/task-orders/${taskId}/cancel`)
    if (response.data.success) {
      // 直接更新本地数据，避免重新请求
      const taskIndex = myPublishedTasks.value.findIndex(task => task.id === taskId)
      if (taskIndex !== -1) {
        myPublishedTasks.value[taskIndex].status = 'CANCELLED'
      }
      ElMessage.success('任务已取消发布')
    } else {
      ElMessage.error(response.data.message || '取消失败')
    }
  } catch (error) {
    console.error('取消任务失败:', error)
    ElMessage.error('取消任务失败')
  }
}

// 完成任务
const completeTask = async (taskId) => {
  try {
    const response = await axios.put(`/task-orders/${taskId}/complete`)
    if (response.data.success) {
      // 直接更新本地数据，避免重新请求
      const taskIndex = myAcceptedTasks.value.findIndex(task => task.id === taskId)
      if (taskIndex !== -1) {
        myAcceptedTasks.value[taskIndex].status = 'COMPLETED'
      }
      ElMessage.success('任务已完成')
    } else {
      ElMessage.error(response.data.message || '完成任务失败')
    }
  } catch (error) {
    console.error('完成任务失败:', error)
    ElMessage.error('完成任务失败')
  }
}

// 取消接受的任务
const cancelAcceptedTask = async (taskId) => {
  try {
    const response = await axios.put(`/task-orders/${taskId}/cancel-accept`)
    if (response.data.success) {
      // 取消接单后，任务从我的接单列表中移除（因为状态变为OPEN，不再属于我接单的任务）
      const taskIndex = myAcceptedTasks.value.findIndex(task => task.id === taskId)
      if (taskIndex !== -1) {
        myAcceptedTasks.value.splice(taskIndex, 1)
      }
      ElMessage.success('已取消接单')
    } else {
      ElMessage.error(response.data.message || '取消失败')
    }
  } catch (error) {
    console.error('取消接单失败:', error)
    ElMessage.error('取消接单失败')
  }
}

// 跳转到用户资料页面
const goToUserProfile = async (userId) => {
  if (!userId) {
    ElMessage.warning('用户信息不完整')
    return
  }
  try {
    // 跳转到用户主页，传递用户ID参数
    await router.push({
      name: 'UserProfile',
      params: { userId: userId }
    })
  } catch (error) {
    console.error('跳转用户主页失败:', error)
    ElMessage.error('跳转失败，请重试')
  }
}

onMounted(async () => {
  await fetchUserInfo()
})
</script>

<style scoped>
/* 现代化标题样式 */
.module-title {
  margin-top: 0;
  padding-bottom: 20px;
  border-bottom: 3px solid transparent;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 24px;
  font-size: 28px;
  font-weight: 700;
  position: relative;
}

.module-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

.profile-container {
  padding: 24px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 50%, #f0f4ff 100%);
  border-radius: 20px;
  min-height: calc(100vh - 100px);
}

.profile-header {
  display: flex;
  align-items: center;
  padding: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  margin-bottom: 24px;
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.2);
  position: relative;
  overflow: hidden;
}

.profile-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 24px;
  position: relative;
  z-index: 1;
}

.avatar {
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 12px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.avatar:hover {
  transform: scale(1.08) translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
}

.upload-btn {
  font-size: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 15px;
  padding: 6px 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.upload-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.user-info {
  flex: 1;
  position: relative;
  z-index: 1;
}

.user-info h3 {
  color: white;
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 16px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.edit-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  border-radius: 25px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(15px);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.edit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.edit-btn:hover::before {
  left: 100%;
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin-top: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.15);
  padding: 8px 12px;
  border-radius: 10px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}

.info-item .label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  min-width: 60px;
  font-size: 13px;
}

.info-item .value {
  color: white;
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.profile-tabs {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.profile-tabs:hover {
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #909399;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 15px;
  border: 2px dashed #e1e8ff;
  margin: 20px 0;
  transition: all 0.3s ease;
}

.empty-state:hover {
  border-color: #c7d2fe;
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0ff 100%);
}

.empty-state p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.settings-form {
  max-width: 500px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  padding: 24px;
  border-radius: 15px;
  border: 1px solid #e1e8ff;
}

/* 标签页样式优化 */
:deep(.el-tabs__header) {
  margin-bottom: 20px;
}

:deep(.el-tabs__nav-wrap::after) {
  background: linear-gradient(90deg, #e1e8ff 0%, #c7d2fe 100%);
  height: 2px;
}

:deep(.el-tabs__active-bar) {
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  height: 3px;
  border-radius: 2px;
}

:deep(.el-tabs__item) {
  font-weight: 500;
  color: #606266;
  transition: all 0.3s ease;
}

:deep(.el-tabs__item:hover) {
  color: #667eea;
}

:deep(.el-tabs__item.is-active) {
  color: #667eea;
  font-weight: 600;
}

/* 头像上传对话框样式 */
.avatar-upload-dialog {
  text-align: center;
  padding: 30px;
  background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
  border-radius: 15px;
}

.current-avatar {
  margin-bottom: 40px;
  padding: 20px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.current-avatar p {
  margin-top: 15px;
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.upload-section .el-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.upload-section .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4);
}

.file-input {
  display: none;
}

.upload-tip {
  color: #999;
  font-size: 12px;
  margin: 0;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  border: 1px solid #e1e8ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
  }
  
  .avatar-section {
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .edit-btn {
    margin-top: 16px;
    width: 100%;
  }
  
  .module-title {
    font-size: 24px;
  }
  
  .profile-container {
    padding: 16px;
    min-height: calc(100vh - 80px);
  }
}

/* 加载动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.profile-header {
  animation: fadeInUp 0.6s ease-out;
}

.profile-tabs {
  animation: fadeInUp 0.8s ease-out;
}

.avatar:hover {
  animation: pulse 0.6s ease-in-out;
}

/* 帖子列表样式 */
.post-list {
  padding: 0;
}

.post-item {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.post-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.post-item:hover::before {
  opacity: 1;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
}

.post-time {
  color: #666;
  font-size: 13px;
  background: rgba(102, 126, 234, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
}

.post-id {
  color: #999;
  font-size: 12px;
  font-family: 'Courier New', monospace;
}

.post-content {
  margin-bottom: 16px;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.post-text {
  color: #555;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

.post-images {
  margin-top: 12px;
}

.image-grid {
  display: grid;
  gap: 8px;
  border-radius: 12px;
  overflow: hidden;
}

.image-grid.grid-1 {
  grid-template-columns: 1fr;
  max-width: 300px;
}

.image-grid.grid-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 400px;
}

.image-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 450px;
}

.post-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.post-image:hover {
  transform: scale(1.02);
  border-color: rgba(102, 126, 234, 0.3);
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.post-actions {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 12px;
}

.action-group {
  display: flex;
  gap: 16px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #666;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 20px;
  transition: all 0.3s ease;
  position: relative;
}

.action-btn:hover {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  transform: translateY(-1px);
}

.like-btn.active {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
}

.like-btn.active .el-icon {
  animation: pulse 0.6s ease;
}

.comment-btn:hover {
  color: #4ecdc4;
  background: rgba(78, 205, 196, 0.1);
}

.view-btn:hover {
  color: #45b7d1;
  background: rgba(69, 183, 209, 0.1);
}

.load-more {
  text-align: center;
  padding: 20px;
}

.load-more-btn {
  background: linear-gradient(45deg, #667eea, #764ba2);
  border: none;
  border-radius: 25px;
  padding: 12px 32px;
  color: white;
  font-weight: 500;
  transition: all 0.3s ease;
}

.load-more-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

.no-more {
  text-align: center;
  padding: 20px;
  color: #999;
  font-size: 14px;
}

.loading-state {
  text-align: center;
  padding: 40px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 滚动条样式 */
.profile-container::-webkit-scrollbar {
  width: 6px;
}

.profile-container::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.profile-container::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 3px;
}

.profile-container::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* 任务相关样式 */
.task-tabs {
  margin-top: 16px;
}

.task-tabs .el-tabs__header {
  margin-bottom: 20px;
}

.task-tabs .el-tabs__item {
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
}

.task-tabs .el-tabs__item.is-active {
  color: #667eea;
  font-weight: 600;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.task-item {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  /* 移除 overflow: hidden 避免影响按钮点击 */
}

.task-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.02) 0%, rgba(118, 75, 162, 0.02) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  /* 确保伪元素不会阻挡按钮点击 */
  pointer-events: none;
  z-index: 0;
}

.task-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.task-item:hover::before {
  opacity: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.task-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0;
  line-height: 1.4;
}

.task-status {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-pending {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-accepted {
  background: rgba(23, 162, 184, 0.1);
  color: #17a2b8;
  border: 1px solid rgba(23, 162, 184, 0.2);
}

.status-progress {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  border: 1px solid rgba(102, 126, 234, 0.2);
}

.status-completed {
  background: rgba(40, 167, 69, 0.1);
  color: #28a745;
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.status-cancelled {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.status-timeout {
  background: rgba(255, 87, 34, 0.1);
  color: #ff5722;
  border: 1px solid rgba(255, 87, 34, 0.2);
}

.status-default {
  background: rgba(108, 117, 125, 0.1);
  color: #6c757d;
  border: 1px solid rgba(108, 117, 125, 0.2);
}

.task-content {
  position: relative;
  z-index: 1;
}

.task-description {
  color: #555;
  line-height: 1.6;
  margin: 0 0 12px 0;
  word-break: break-word;
}

.task-meta {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.task-price {
  font-size: 16px;
  font-weight: 600;
  color: #e74c3c;
  background: rgba(231, 76, 60, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
}

.task-category {
  background: rgba(102, 126, 234, 0.1);
  color: #667eea;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
}

.task-time {
  color: #666;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 8px;
  border-radius: 8px;
}

/* 接单者信息样式 */
/* 接单者信息样式 */
.accepter-info {
  margin-top: 12px;
  padding: 12px;
  background: rgba(102, 126, 234, 0.05);
  border-radius: 8px;
  border-left: 3px solid #667eea;
  display: flex;
  align-items: center;
}

.accepter-info .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 2px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accepter-info .user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.accepter-info .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8f9fa;
}

.accepter-info .user-info {
  flex: 1;
}

.accepter-info .username {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accepter-info .username:hover {
  transform: translateX(2px);
  filter: brightness(1.2);
}

.accepter-info .post-time {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

/* 发起人信息样式 */
/* 发起人信息样式 */
.publisher-info {
  margin-top: 12px;
  padding: 12px;
  background: rgba(52, 168, 83, 0.05);
  border-radius: 8px;
  border-left: 3px solid #34a853;
  display: flex;
  align-items: center;
}

.publisher-info .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, #34a853, #2d8f47);
  padding: 2px;
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publisher-info .user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(52, 168, 83, 0.3);
}

.publisher-info .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: #f8f9fa;
}

.publisher-info .user-info {
  flex: 1;
}

.publisher-info .username {
  font-weight: 600;
  font-size: 14px;
  color: #1f2937;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #34a853, #2d8f47);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publisher-info .username:hover {
  transform: translateX(2px);
  filter: brightness(1.2);
}

.publisher-info .post-time {
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
}

.task-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  /* 确保按钮区域在最上层 */
  position: relative;
  z-index: 10;
}

.task-actions .el-button {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
  /* 确保按钮可以接收点击事件 */
  pointer-events: auto;
  position: relative;
  z-index: 11;
}

.task-actions .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
</style>
<mcfile name="Profile.vue" path="h:\毕业设计\SchoolHelper\Front\src\views\modules\Profile.vue"></mcfile>